<template>
  <div>2024-05-04所在月的所有日期: <br />{{ monthAllDate('2024-05-04') }}</div>
  <br />
  <div>2024-01-01所在月的所有日期: <br />{{ monthAllDate('2024-01-01') }}</div>
  <br />
  <div>2023-01-01所在月的所有日期: <br />{{ monthAllDate('2023-01-01') }}</div>
  <br />
  <div>2021-12-30所在月的所有日期: <br />{{ monthAllDate('2021-12-30') }}</div>
  <br />
  <div>2021-12-31所在月的所有日期: <br />{{ monthAllDate('2021-12-31') }}</div>
</template>

<script setup>
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(isSameOrBefore)

/**
 * 获取指定日期所在月的所有日期
 *
 * @param dateStr 指定日期. 格式: YYYY-MM-DD. 如: 2011-03-15
 */
function monthAllDate(dateStr) {
  const date = dayjs(dateStr)
  let startDate = date.startOf('month')
  let endDate = date.endOf('month')

  let loopStartDate = startDate
  const allDateArr = []
  while (loopStartDate.isSameOrBefore(endDate)) {
    allDateArr.push({ full: loopStartDate.format('YYYY-MM-DD'), short: loopStartDate.format('MM-DD') })
    loopStartDate = loopStartDate.add(1, 'day')
  }
  return allDateArr
}
</script>
